<script setup>
import { reactive, onMounted } from 'vue';
import { statementitemApi } from '@T2/service/api.ts';
import ChartsEnlarge from './chartsEnlarge.vue';
import Charts from '@T2/components/charts/charts1.vue';
import dayjs from 'dayjs';
import EnlargeIcon from '~icons/custom/enlarge';

const props = defineProps({
  statement: {
    type: Object,
    required: true,
  },
});
onMounted(() => {
  getStatementitem();
});

const Resd = reactive({
  sensors: [],
  enlarge: false,
});
const getStatementitem = () => {
  statementitemApi({
    method: 'get',
    params: {
      statement: props.statement.id,
    }
  }).then(res => {
    Resd.sensors = res.results?.map(item => {
      return {id: item.sensor, name: item.name, unit: item.sensor_unit};
    });
  })
}

const timeList = [
  {key: 0, name: '最近6小时', value: '最近6小时'},
  {key: 1, name: '最近12小时', value: '最近12小时'},
  {key: 2, name: '最近24小时', value: '最近24小时'},
];
/* 卡片曲线时间 */
const timesResd = reactive({
  time: '最近6小时',
  start: dayjs().subtract(6, 'hour').format('YYYY-MM-DD HH:mm:ss'),
  end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  enlarge: false,
});
const timeChange = (value) => {
  if (value === '最近6小时') {
    timesResd.start = dayjs().subtract(6, 'hour').format('YYYY-MM-DD HH:mm:ss');
    timesResd.end = dayjs().format('YYYY-MM-DD HH:mm:ss');
  } else if (value === '最近12小时') {
    timesResd.start = dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss');
    timesResd.end = dayjs().format('YYYY-MM-DD HH:mm:ss');
  } else if (value === '最近24小时') {
    timesResd.start = dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
    timesResd.end = dayjs().format('YYYY-MM-DD HH:mm:ss');
  }
}
/* 弹窗曲线时间 */
const dialogTimesResd = reactive({
  date: dayjs().format('YYYY-MM-DD'),
  
  start: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
  end: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
  enlarge: false,
});
const dialogDateChange = (value) => {
  dialogTimesResd.start = value + ' 00:00:00';
  dialogTimesResd.end = value + ' 23:59:59';
}
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
</script>

<template>
  <div class="card flex-column" >
    <div class="title flex--center">
      <div class="vertical-line"></div>
      <div class="group-name">{{ props.statement.name }}</div>
      <el-select v-model="timesResd.time" @change="timeChange" :teleported="false">
        <el-option
          v-for="item in timeList"
          :key="item.key"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <div class="icons flex--center">
        <el-icon @click="Resd.enlarge = true"><EnlargeIcon /></el-icon>
      </div>
    </div>
    <div class="charts-container">
      <Charts
        :sensors="Resd.sensors"
        :start="timesResd.start"
        :end="timesResd.end"
        topic="#022625"
        v-if="Resd.sensors.length"
      />
    </div>
  </div>
  
  <div class="pop-container" v-if="Resd.enlarge">
    <div class="pop-box flex--center flex-column">
      <div class="enlarge-header flex--center">
        <div class="group-name">{{ props.statement.name }}</div>
        <el-date-picker
          v-model="dialogTimesResd.date"
          class="date-Picker"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDate"
          :clearable="false"
          :teleported="false"
          size="small"
          @change="dialogDateChange"
        />
        <el-icon @click="Resd.enlarge = false;"><Close /></el-icon>
      </div>
      <hr />
      <div class="charts-card flex-center-center">
        <div class="pop-charts-container flex-center-center">
          <ChartsEnlarge :sensors="Resd.sensors" :start="dialogTimesResd.start" :end="dialogTimesResd.end" v-if="Resd.enlarge && Resd.sensors.length" />
        </div>
      </div>
      <div class="tLeft"></div>
      <div class="bLeft"></div>
      <div class="tRight"></div>
      <div class="bRight"></div>
    </div>
  </div>
  
</template>

<style lang="scss" scoped>
.card {
  position: relative;
  width: 476px;
  height: 380px;
  background: transparent;
  border-radius: 4px;
  padding: 15px 10px;
  .title {
    height: 30px;
    line-height: 30px;
    position: relative;
    .vertical-line {
      width: 3px;
      height: 70%;
      background: #5CCCC5;
      margin: 0 10px;
    }
    .group-name {
      font-weight: 600;
      font-size: 21px;
      color: #D3F2EE;
      position: relative;
    }
    :deep(.el-select) {
      width: 120px;
      margin-left: 20px;
      .el-select__wrapper {
        min-height: 27px;
        background-color: rgba(0,36,46,0.6);
        box-shadow: none;
        border: 1px solid #025A5A;
        border-radius: 2px;
      }
      .el-popper {
        background-color: rgba(0,36,46,1);
        border-color: #025A5A;
        .el-popper__arrow::before {
          background-color: rgba(0,36,46,1);
          border: 1px solid #025A5A;
        }
        .el-select-dropdown__item.is-hovering {
          background-color: rgba(17,212,227,0.1);
        }
        .el-select-dropdown__item.is-selected {
          background-color: rgba(17,212,227,0.3);
        }
        .el-select-dropdown__item.is-selected.is-hovering {
          background-color: rgba(17,212,227,0.4);
        }
      }
    }
    .icons {
      margin-left: auto;
      .el-icon {
        font-size: 25px;
        cursor: pointer;
        color: rgba(92,204,197,0.5);
        margin-left: 5px;
        &:hover {
          color: rgba(92,204,197,1);
        }
      }
    }
  }
  .charts-container {
    margin-top: 15px;
    width: 100%;
    height: 310px;
  }
}
.pop-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.2);
  z-index: 10;
}
.pop-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  width: 1200px;
  height: 700px;
  background: linear-gradient( 180deg, #000000 0%, rgba(0,0,0,0.66) 100%);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
  border: 1px solid #0099B3;
  .enlarge-header {
    width: 100%;
    height: 50px;
    padding-left: 30px;
    .group-name {
      font-weight: 500;
      font-size: 24px;
      color: #ffffff;
    }
    .el-icon {
      margin-left: auto;
      font-size: 24px;
      cursor: pointer;
      color: #fff;
      margin-right: 20px;
    }
    :deep(.date-Picker) {
      margin-left: 20px;
      width: 180px;
      background-color: transparent;
      .el-input__wrapper {
        background-color: transparent;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
      }
      input {
        color: #ffffff;
      }
    }
  }
  hr {
    width: calc(100% - 40px);
    height: 4px;
    border: 1px dashed #bababa;
  }
  .charts-card {
    width: calc(1200px - 16px);
    height: calc(700px - 76px);
    background-color: #001C20;
    position: relative;
  }
  .pop-charts-container {
    width: calc(100% - 200px);
    height: calc(100% - 20px);
    position: relative;
  }
  .tLeft,
  .bLeft,
  .tRight,
  .bRight {
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-width: 7px;
  }
  $color: #0099B3;
  .tLeft {
    top: 0;
    left: 0;
    border-color: $color transparent transparent $color;
  }
  .bLeft {
    bottom: 0;
    left: 0;
    border-color: transparent transparent $color $color;
  }
  .tRight {
    top: 0;
    right: 0;
    border-color: $color $color transparent transparent;
  }
  .bRight {
    bottom: 0;
    right: 0;
    border-color: transparent $color $color transparent;
  }
}
</style>